/*
 Boton con CSS3
 autor: Miquel ;
 url: http://miiquel.com;
*/
body, div{ margin:0; padding:0;}
body{background: url(Proxy_Grass.jpg);}
.wrap{ width:1100px; margin:10px auto; text-align:center;}
.wrap h1{ color:#23aebe; font:normal 48px 'Lobster'; margin-bottom:80px;}

/* Creamos los estilos del boton */
.button{
  background:#e5e5e5;
  display:inline-block;
  margin:0 6px;
  padding:7px 20px 7px;
  color:#333;
  font:400 14px 'Droid Sans';
  text-decoration:none;
  text-shadow: 0 1px 1px #FFF;
  border:1px solid #ccc;

  /* Bordes redondenados - Border Radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Fondo Degradado - Background Gradient */
  background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
  background:        linear-gradient(top, #fefefe, #e5e5e5); 
  
  /* Aplcamos sombras al boton - Box Shadow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

  /* Animacion - Transition */
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
}
.button:hover{
  border-color:#adcce2; /* Modificamos el color del borde */

  /* Cambiamos los colores del fondo degradado */
  background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
  background:        linear-gradient(top, #fefefe, #f1f1f1);
  
  /* Modificamos las propiedades del Box Shadow para un efecto Glow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
  -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
  box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
}